<!-- props 应该是单向数据流（父组件 → 子组件） 不建议直接修改props得页码做到分页 能生效是因为对象是引用类型 -->
<template>
  <div
    v-if="!loading && dataSource.list != null && dataSource.list.length == 0"
  >
    <Nodata :msg="noDataMessage"></Nodata>
  </div>
  <div class="skeleton" v-if="loading">
    <el-skeleton :row="2" animated></el-skeleton>
  </div>

  <div v-for="item in dataSource.list" v-if="!loading">
    <slot :data="item"></slot>
  </div>
  <div class="pagination">
    <el-pagination
      v-if="dataSource.totalCount > 1"
      :total="dataSource.totalCount"
      size="small"
      :page-size="dataSource.pageSize"
      :current-page.sync="dataSource.pageNo"
      background
      layout="prev, pager, next"
      class="mt-4"
      @current-change="handlePageNoChange"
      style="text-align: left"
    ></el-pagination>
  </div>
</template>

<script setup>
const props = defineProps({
  dataSource: {
    type: Object,
  },
  loading: {
    type: Boolean,
  },
  noDataMessage: {
    type: String,
    default: "空空如也",
  },
});
const emit = defineEmits(["pageChange", "loadData"]);
const handlePageNoChange = (pageNo) => {
  //触发改变页码事件并把页码传回给父组件
  emit("pageChange", pageNo);
};
</script>

<style lang="scss" scoped>
.pagination {
  padding: 10px 0px 10px 10px;
}
.skeleton {
  padding: 15px;
}
</style>
